<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin layui-col-xs12 layui-col-sm12 layui-col-md12">
    <!-- 顶部菜单 -->
    <div class="layui-header">
        <div class="layui-logo">
            <a href="#" style="color: #009688;font-weight: bold;">layui 后台布局</a>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left layui-nav-itemed">
            <li class="layui-nav-item"><a th:href="@{/}">首页</a></li>
            <li class="layui-nav-item layui-this">
                <a href="javascript:;">易收系统</a>
            </li>
        </ul>
    </div>
    <!-- 侧边菜单 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">易收系统</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/system/community/toCommunityList}">小区管理</a></dd>
                        <dd><a th:href="@{/system/building/toBuildingList}">楼栋管理</a></dd>
                        <dd><a th:href="@{/system/user/toUserList}">已入驻业主管理</a></dd>
                        <dd><a th:href="@{/system/owner/toOwnerList}">未入驻业主管理</a></dd>
                        <dd><a th:href="@{/system/order/toOrderList}">订单管理</a></dd>
                        <dd class="layui-this"><a href="#">员工管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="layui-body" style="margin-left: 30px;margin-right: 30px;">
        <!-- 员工列表 -->
        <div style="margin-top: 20px;margin-bottom: 10px;">
            <h1 align="center" style="font-weight: bold;">员工列表</h1>
        </div>

        <!-- 查询框开始 -->
        <div style="margin-right: 20px;margin-top: 20px;">
            <form class="layui-form">
                <!-- 员工编号 -->
                <div class="layui-input-inline" style="margin-left: 10px">
                    <input type="text" name="empId" id="s_empId" placeholder="请输入员工编号" autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 名字 -->
                <div class="layui-input-inline" style="margin-left: 10px;">
                    <input type="text" name="empName" id="s_empName" placeholder="请输入员工姓名" autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 手机号 -->
                <div class="layui-input-inline" style="margin-left: 10px;;margin-right: 10px;">
                    <input type="text" name="empPhone" id="s_empPhone" placeholder="请输入员工联系方式" autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 查询和添加按钮 -->
                <a class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSearch">查询</a>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                <a style="float: right;" class="layui-btn layui-btn-sm" id="doAdd">添加</a>
            </form>
        </div>
        <!-- 查询框结束 -->

        <!-- 表格框开始 -->
        <div style="margin-top: 20px;">
            <table class="layui-hide" id="emps" lay-filter="empTable"></table>
            <div id="barDemo" style="display: none;">
                <a class="layui-btn layui-btn-xs" lay-event="detailEmpById">详情</a>
                <a class="layui-btn layui-btn-xs" lay-event="editEmpById">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteEmpById">删除</a>
            </div>
        </div>
        <!-- 表格框结束 -->

        <!-- 添加员工的弹出层 -->
        <div id="addEmpDiv" style="display: none;padding: 40px;">
            <form class="layui-form layui-form-pane" style="margin:10px;">
                <!--员工姓名与年龄-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">员工姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="empName" id="a_empName" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">员工年龄</label>
                        <div class="layui-input-inline">
                            <input type="text" name="empAge" id="a_empAge" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--员工联系方式与密码-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-inline">
                            <input type="text" name="empPhone" id="a_empPhone" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">员工密码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="empPassword" id="a_empPassword" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--负责区域和工作时间-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">负责区域</label>
                        <div class="layui-input-inline">
                            <input type="text" name="chargeArea" id="a_chargeArea" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">工作时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="workTime" id="a_workTime" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--负责的小区ID-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">小区ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="communityId" id="a_communityId" lay-verify="required|number" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!-- 员工头像 -->
                <div class="layui-form-item" style="margin-top: 30px;">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-upload-list thumbBox mag0 " style="margin-left: 110px;">
                        <input type="hidden" name="empPic" id="a_empPic" value="">
                        <img id="addEmpPic" style="width: 80px;height:80px;margin-left: 10px;" class="layui-upload-img thumbImg" alt="">
                    </div>
                </div>
                <!-- 提交和重置按钮 -->
                <div class="layui-form-item" style="margin-top: 50px;margin-left: 180px;">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSubmit">提交
                        </button>
                        <button type="reset" id="reloadFrame" class="layui-btn layui-btn-sm layui-btn-primary">重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 添加员工的弹出层结束 -->

        <!-- 修改员工的弹出层 -->
        <div id="editEmpDiv" style="display: none;padding:40px;">
            <form class="layui-form layui-form-pane" style="margin:10px;" lay-filter="formData">
                <!-- 员工的id值,需要隐藏起来 -->
                <div>
                    <div class="layui-form-item" style="width: 350px;">
                        <input type="hidden" name="empId" id="e_empId" lay-verify="required" autocomplete="off">
                    </div>
                </div>
                <!--员工姓名与年龄-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">员工姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="empName" id="e_empName" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">员工年龄</label>
                        <div class="layui-input-inline">
                            <input type="text" name="empAge" id="e_empAge" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--员工联系方式与密码-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">联系方式</label>
                        <div class="layui-input-inline">
                            <input type="text" name="empPhone" id="e_empPhone" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">员工密码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="empPassword" id="e_empPassword" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--负责区域和工作时间-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">负责区域</label>
                        <div class="layui-input-inline">
                            <input type="text" name="chargeArea" id="e_chargeArea" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">工作时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="workTime" id="e_workTime" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--负责的小区ID-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">小区ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="communityId" id="e_communityId" lay-verify="required|number" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!-- 员工头像 -->
                <div class="layui-form-item" style="margin-top: 30px;">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-upload-list thumbBox mag0 " style="margin-left: 110px;">
                        <!--员工头像的隐藏域-->
                        <input type="hidden" name="empPic" id="e_empPic" value="">
                        <img id="editEmpPic" style="width: 80px;height:80px;margin-left: 10px;" class="layui-upload-img thumbImg" alt="">
                    </div>
                </div>
                <!-- 修改和重置按钮 -->
                <div class="layui-form-item" style="margin-top: 50px;margin-left: 180px;">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="editSubmit">修改
                        </button>
                        <button type="reset" id="reloadMessage" class="layui-btn layui-btn-sm layui-btn-primary">重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 修改员工的弹出层结束 -->
        <!-- 主体内容结束 -->
    </div>
</div>

<!-- 用户列表结束 -->
<!-- 以下是layui函数代码块 -->
<script type="application/javascript" th:src="@{/js/layui/layui.js}"></script>
<!-- 导入用户列表的js文件 -->
<script type="application/javascript" th:src="@{/js/layui/sys_employee.js}"></script>
</body>
</html>